<template>
  <div>
    <div class="content-item">
      <div class="g-condition">
        <span class="label">制定日期：</span>
        <el-date-picker v-model="queryParams.date"
                        type="daterange"
                        size="small"
                        style="width: 250px;"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" />
      </div>
      <div class="g-condition">
        <span class="label">当前状态：</span>
        <el-select v-model="queryParams.status"
                   placeholder="请选择"
                   style="width: 250px;"
                   size="small">
          <el-option v-for="(item, index) in statusCheckWork"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="g-condition">
        <span class="label">工作项类型：</span>
        <el-select v-model="queryParams.checkType"
                   placeholder="请选择"
                   style="width: 250px;"
                   size="small">
          <el-option v-for="(item, index) in checkType"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="g-condition">
        <span class="label">关键字：</span>
        <el-input v-model.trim="queryParams.workNameOrUserName"
                  size="small"
                  class="condition"
                  v-intercept:param="queryParams.workNameOrUserName"
                  style="width: 250px;"
                  placeholder="输入工作项名称或制定人姓名">
        </el-input>
      </div>
      <div>
        <el-button size="small"
                   type="primary"
                   @click="query()">搜索
        </el-button>
        <el-button size="small"
                   @click="reset">重置
        </el-button>
        <el-button size="small"
                   v-if="userInfo && userInfo.roleName === '学校用户'"
                   @click="add">+新增
        </el-button>
      </div>
    </div>
    <div class="content-item">
      <el-table :data="tableData"
                class="table-header-gray">
        <el-table-column label="制定日期"
                         :formatter="formatTime"
                         prop="createAt">
        </el-table-column>
        <el-table-column label="工作项名称"
                         prop="name">
        </el-table-column>
        <el-table-column label="工作项类型"
                         :formatter="formatChecktype"
                         prop="checkType">
        </el-table-column>
        <el-table-column label="开始日期"
                         :formatter="formatTime"
                         prop="startAt">
        </el-table-column>
        <el-table-column label="结束日期"
                         :formatter="formatTime"
                         prop="endAt">
        </el-table-column>
        <el-table-column label="制定人"
                         prop="creatorName">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span :class="'g-workstatus-' + scope.row.status">{{formatStatus(scope.row.status)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <span class="gtextlink"
                    @click="toDetail(scope.row)">查看</span>
              <span class="gtextlink"
                    @click="auth(scope.row, 'edit')">编辑</span>
              <span class="gtextlink"
                    @click="auth(scope.row, 'del')">删除</span>
            </div>
            <!-- <div v-else>
              <span class="gtextlink"
                    @click="toDetail(scope.row)">查看</span>
              <span class="g-text-gray">编辑</span>
              <span class="g-text-gray">删除</span>
            </div> -->
          </template>
        </el-table-column>
      </el-table>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>
  </div>
</template>
<script>
import { pagination, formatTool, config } from '@/tools/mixin'
import { listCheckWorkUsingPOST, modifyCheckWorkUsingDELETE } from '@api/auto'
export default {
  name: '',
  props: {
  },
  mixins: [pagination, formatTool, config],
  components: {},
  data () {
    return {
      tableData: [],
      total: 0,
      queryParams: {
        size: 10,
        page: 1,
        date: '',
        createBegin: '',
        createEnd: '',
        status: '',
        workNameOrUserName: '',
        checkType: ''
      },
      userInfo: {}
    }
  },
  created () { },
  mounted () {
    this.userInfo = JSON.parse(sessionStorage.userInfo)
    this.query()
  },
  methods: {
    init () {
      this.queryParams = {
        size: 10,
        page: 1,
        date: '',
        createBegin: '',
        createEnd: '',
        status: '',
        workNameOrUserName: '',
        checkType: ''
      }
    },
    reset () {
      this.init()
      this.query()
    },
    add () {
      this.$router.push({
        path: '/main/dormManage/workCheck/edit'
      })
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      if (this.queryParams.date && this.queryParams.date.length) {
        [this.queryParams.createBegin, this.queryParams.createEnd] = [...this.queryParams.date]
      }
      let temp = this.$lodash.cloneDeep(this.queryParams)
      delete temp.date
      listCheckWorkUsingPOST(temp)
        .then(res => {
          this.total = (res.data && res.data.total) || 0
          this.tableData = (res.data && res.data.list) || []
        })
    },
    edit (data) {
      // 跳转编辑页
      sessionStorage.wordDetail = JSON.stringify(data)
      this.$router.push({
        path: '/main/dormManage/workCheck/edit',
        query: {
          routeName: '编辑',
          type: 'edit'
        }
      })
    },
    toDetail (data) {
      sessionStorage.wordDetail = JSON.stringify(data)
      this.$router.push({
        path: '/main/dormManage/workCheck/detail'
      })
    },
    auth (data, type) {
      let userInfo = JSON.parse(sessionStorage.userInfo)
      if (userInfo.roleName !== '学校用户' || userInfo.sn !== data.creatorSn) {
        this.$message.error('您没有权限进行该操作')
      } else {
        this[type](data)
      }
    },
    del (data) {
      let id = data.id
      // 通过id删除项
      this.$confirm('是否确认删除此工作项？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        modifyCheckWorkUsingDELETE(id)
          .then(() => {
            this.query()
            this.$message.success('删除成功')
          })
      })
    }
  }
}
</script>
<style lang='less' scoped>
</style>
